<template>
	<div style="margin-bottom: 10%;">
		<div style="display: flex; justify-content: space-between;">
			<h3>学生管理</h3>
			<p></p>
			<h4><button @click="go2Add()">添加新的学生</button></h4>
			<p></p>
		</div>
		<hr>
		<div>
			<div>
				<div style="width: 90% ;">
					<table border="1" style="width: 95%">
						<tbody>
							<tr style="background-color: gainsboro">
								<th>用户编号</th>
								<th>用户名称</th>
								<th>联系方式</th>
								<th>班级编号</th>
								<th>班级名称</th>
								<th>用户头像</th>
								<th>修改</th>
								<th>删除</th>
							</tr>
							<tr v-for="s in data.stus">
								<td>{{s.uid}}</td>
								<td>{{s.uname}}</td>
								<td>{{s.phone}}</td>
								<td>{{s.clz.clzno}}</td>
								<td>{{s.clz.clzname}}</td>
								<td><img v-bind:src="pic(s.pic)" alt="头像" style="width: 5vw;height: 5vw;" /></td>
								<td><button @click="go2Update(s.uid)">修改</button></td>
								<td><button @click="del(s.uid)">删除</button></td>
							</tr>
						</tbody>
					</table>
					<button @click="pagenum(-1)">上一页</button>
					{{store.state.pagenum}}/{{totals}}
					<button @click="pagenum(1)">下一页</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { computed, onMounted, reactive } from 'vue'
	import logo from '@/assets/logo.png';
	import router from "@/router"
	import {$get} from '@/ajax';
	import store from '@/store';
	
	const data = reactive({
		stu: {},
		stus: [],
		// total 总行数 ，num 当前页数 ，line 页数
		page:{total:0,totals:0,num:1,line:6,}
	})
	
	const totals = computed(() =>{
		//向上取整Math.ceil()
		let page = Math.ceil(data.page.total/data.page.line)
		data.page.totals = page;
		return page
	})
	
	// "/api/adm/stu/findPage?pagenum=" + this.page.num + "&lines=" + this.page.lines
	const pagenum = (num) => {
		store.state.pagenum += num;
		//当前页数
		let pagenum = store.state.pagenum;
		if(pagenum < 1){
			console.log("一页")
			store.state.pagenum = 1;
			return;
		}
		if(pagenum > data.page.totals) {
			console.log("加一页")
			store.state.pagenum = data.page.totals;
			return;
		}
		
		$get(`/api/adm/stu/findPage?pagenum=${store.state.pagenum}&lines=${data.page.line}`)
		.then((resp) => {
			//更新页面数据内容
			data.stus = resp.data.data.students;
			//更新数据总行数
			data.page.total = resp.data.data.total;
		})
	}
	
	const go2Add = () => {
		router.push({
			path: "/adm/addstu",
			query: {
				uid: 0,
			}
		})
	}
	
	const go2Update = (id) => {
		router.push({
			path: "/adm/addstu",
			query: {
				uid: id,
			}
		})
	}
	
	const del = (id) => {
		console.log("删除学生的id:" + id)
		$get("/api/adm/stu/del?uid=" + id).then((resp) => {
				//传输搜索结果
				data.stus = resp.data.data
			})
	}
	
	const pic = (id) => {
		let pic = `http://127.0.0.1:9000/api/public/showimg/` + id;
		if (id == undefined || id == "") {
			pic = logo;
		}
		return pic;
	}
	
	onMounted(() => {
		let pagenum = store.state.pagenum
		console.log(pagenum)
		if(pagenum < 1 ){
			store.state.pagenum = 1
		}
		$get("/api/adm/stu/findPage?pagenum=" + store.state.pagenum + "&lines=" + data.page.line)
			.then((resp) => {
					//初始化数据内容
					data.stus = resp.data.data.students;
					//初始化数据总行数
					data.page.total = resp.data.data.total;
				})
	})
	
	
</script>

<style>
</style>